<script setup lang="ts">
import { We_getInstance } from '@/we-api/we-env'
import { We_showEcharts } from '@/we-api/we-components/WeEcharts'
import { We_getDefaultProviderViewModel } from '@/we-api/we-map'
import { load } from '.'
import { AssetsHost } from '@/cesium-api/env'

const cesiumOptions = {
  imageryProviderViewModels: [We_getDefaultProviderViewModel()],
  scene3DOnly: true,
  defaultImagery: 0,
  multiViewIndex: 1,
}

onMounted(() => {
  const WE = We_getInstance(1)
  if (!WE) return
  WE.viewer.scene.globe.show = false
  if (WE.viewer.scene.sun) WE.viewer.scene.sun.show = false
  if (WE.viewer.scene.skyAtmosphere) WE.viewer.scene.skyAtmosphere.show = false
  WE.showAnimation = false
  WE.showTimeLine = false
  WE.showNavigationWidget = false
  WE.showToolbar = false
  WE.showSkyBox = false
  WE.viewer.useDefaultRenderLoop = false

  //test code
  const options = {
    url: `${AssetsHost}/Assets/2025/暴雨所/Z_OTHE_RADAMOSAIC_20200718154800.bin`,
    p1: Cesium.Cartographic.fromDegrees(114.147466, 30.994626),
    p2: Cesium.Cartographic.fromDegrees(114.594326, 31.1304),
    filterMin: 10,
  }
  load(options)
})
</script>

<template>
  <div class="cesium-map" style="display: block">
    <cesium-map :cesium-options="cesiumOptions" />
  </div>
  <div>
    <WeEcharts v-if="We_showEcharts" class="wecharts"></WeEcharts>
  </div>
</template>

<style scoped>
.cesium-map {
  width: 100vw;
  height: 100vh;
  position: absolute;
  pointer-events: none;
}

.wecharts {
  position: absolute;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 1);
}
</style>
